<template>
	<div id="conn" style="width: 100%; height: 950px;">
	<div id="r" style="width: 230px; height: 950px; background-color: #00FFFF; float: left;">
		<el-row class="tac">
			<el-col :span="3">
				<div id="t" style="width: 230px; height: 70px; background-color: brown;">
					<img src="../../build/logo.png" style="width: 230px;height: 70px;" />
				</div>
				<div class="d">
					<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
						<el-menu-item index="1" @click="diancan">
							<i class="el-icon-fork-spoon"></i>
							<span slot="title">点餐</span>
						</el-menu-item>
						<el-submenu index="2" disabled>
							<template slot="title" >
								<i class="el-icon-data-line"></i>
								<span>营业分析</span>
							</template>
						</el-submenu>
						<el-submenu index="3" disabled>
							<template slot="title">
								<i class="el-icon-dish-1"></i>
								<span>菜品管理</span>
							</template>
						</el-submenu>
						<el-menu-item index="4" @click="table">
							<i class="el-icon-hot-water"></i>
							<span slot="title">桌台管理</span>
						</el-menu-item>
						<el-submenu index="5" disabled>
							<template slot="title" >
								<i class="el-icon-cold-drink"></i>
								<span>会员管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="1-7" @click="vipadd">注册会员</el-menu-item>
								<el-menu-item index="1-8" @click="vipall">会员信息及修改</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="6" disabled>
							<template slot="title" >
								<i class="el-icon-s-custom"></i>
								<span>员工管理</span>
							</template>
						</el-submenu>
					</el-menu>
				</div>
			</el-col>
		</el-row>
	</div>
	<div class="ro">
		<router-view></router-view>
	</div>
	</div>
</template>

<script>
	export default {
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			
			table:function(){
				this.$router.push({path:'/table'})
			},
			
			diancan:function(){
				this.$router.push({path:'/diancan'})
			}
		}
	}
</script>

<style>
	.d {
		width: 230px;
		height: 880px;
		background-color: #545C64;
		float: left;
	}
	
	.ro {
		width: calc(100% - 250px);
		height: 875px;
		margin-top: 70px;
		border: solid black;
		background-color: gainsboro;
		float: left;
	}
</style>